<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<div class="header_background">
	<div class="container header_container">
		<div class="header_logo">
			<img src="<c:url value='/images/header_logo.png'/>" class="header_" style="margin: 0 auto; margin-top:13px; cursor:pointer;" onClick="javascript:location.href='list.do'"/>
		</div>
		
		<div style="float:left; width:454px; height:60px;line-height: 50px; text-align: center;">
			<span id="changeText" style="color:white"></span>
		</div><!-- id="headerCategory" -->
		
		<div style="float:left; width:300px; height:60px;">
			<div class="headerMenu" style="text-align: center;" id="writingUpload">
				 <img src="<c:url value='/images/header_writing.png'/>" style="margin-top:6px;"/>
			</div>
			
			<div class="headerMenu" style="/* background: #E8D9FF */ text-align: center;" >
			<img src="<c:url value='/images/header_category.png'/>" style=" margin-top:12px;"  id="headerCategory"/>
				<div class="categoryMap"   style="display:none">
					<div class="headerArrow"></div>
					<%-- <div class="categorySearch">
						<input type="text" style="border:0; float: left; padding: 5px;" placeholder="검색하세요...">
						<img src="<c:url value='/images/main_search.png'/>"id="categoryView" style=" float: left; margin-left: -25px; margin-top: 6px;"/>
					</div> --%>
					<div class="categoryView" >
						<div id="categoryItem1">
							<span id="categoryItemText1">기쁨</span>
						</div>
						<div id="categoryItem2">
							<span id="categoryItemText2">슬픔</span>
						</div>
						<div id="categoryItem3">
							<span id="categoryItemText3">즐거움</span>
						</div>
						<div id="categoryItem4">
							<span id="categoryItemText4">놀람</span>
						</div>
						<div id="categoryItem5">
							<span id="categoryItemText5">화남</span>
						</div>
					</div>
				</div>
			</div>
			
			<div class="headerMenu" style="/* background: #E8D9FF ; */ text-align: center;" >
				<img src="<c:url value='/images/header_plus.png'/>" style=" margin-top:12px;" id="headerMenu"/>
				<div class="menuMap" style="display:none;margin-top: 11px;">
					
					<div class="menuView">
					<div class="menuBorder">
					</div>
						<div class="menuItem" id="writing">
						<img src="<c:url value='/images/header_icon_writing.png'/>" style=" margin-top:12px;" id="headerMenu"/>
						<span class="menuItemText">글</span>
						</div>
						
						<div class="menuItem" id="photo">
						<img src="<c:url value='/images/header_icon_photo.png'/>" style=" margin-top:13px;" id="headerMenu"/>
						<span class="menuItemText">사진</span>
						</div>
						
						<div class="menuItem" id="video">
						<img src="<c:url value='/images/header_icon_video.png'/>" style=" margin-top:19px;" id="headerMenu"/>
						<span class="menuItemText">동영상</span>
						</div>
						
						<div class="menuItem" id="music">
						<img src="<c:url value='/images/header_icon_music.png'/>" style=" margin-top:15px;" id="headerMenu"/>
						<span class="menuItemText">뮤직</span>
						</div>
						
						<div class="menuItem" id="link">
						<img src="<c:url value='/images/header_icon_link.png'/>" style=" margin-top:17px;" id="headerMenu"/>
						<span class="menuItemText">링크</span>
						</div>
					
					</div>
				</div>
			</div>
			
			<div class="headerMenu" style="/* background: #D1B2FF */text-align: center" >
				<img src="<c:url value='/images/header_notice.png'/>" style=" margin-top:12px;" id="headerNotice"/>
				<div class="noticeMap" style="display:none">
					<div class="headerArrow"></div>
					<div class="noticeView">
						<div >
							<span class="noticeHeaderText">최근 알림</span>
						</div>
						<c:forEach begin="0" end="55" step="1">
						<div id="noticeItem">
							<div style="float: left; width:80px; height:55px;">
								<div style="background:#3F8EBF; width:42px; height:42px; margin:0 auto; margin-top:6.5px;">
								
								</div>
							</div>
							
							<div style="float: left; width:250px; height:55px;">
								<div style="width:100%; height:35px; border: 0; font-size: 12px; line-height:35px;">
									<span><strong>OMA</strong>님과 친구가 되었습니다.</span>
								</div>
								<div style="width:100%;height:15px; border: 0; font-size: 12px;">
									<span>2014년 6월 9일</span>
								</div>
							</div>
							
						</div>
					</c:forEach>
					</div>
				</div>
			
			</div>
			
			<div class="headerMenu" style="/* background: #A566FF */text-align: center;" >
			<div style="width:60px; height:60px; position: relative;">
			 <img src="<c:url value='/images/header_profile.png'/>" style="margin-top:3px;" />
			 <img src="<c:url value='/images/testImg/2.jpg'/>" id="headerSetting" style="width: 49px;height: 50px;margin-top: -52px;margin-left: 5px;border-radius: 50px;display: block;position: absolute;"/>
			 </div>
				<div class="settingMap" style="display:none">
					<div class="headerArrow"></div>
					<div class="settingView">
						<div>
							<span>내스토리</span>
						</div>
						<div>
							<span>프로필</span>
						</div>
						<div>
							<span>공지사항	</span>
						</div>
						<div>
							<span>문의하기</span>
						</div>
						<div>
							<span>로그아웃</span>
						</div>
						<div>
							<span>
								App Store
							</span>
							<span>
								Google Play
							</span>
						</div>
					
					</div>
				</div>
			
			</div>
			<div style="background:transparent; margin-top: 115px; margin-left: -125px; width:180px; height:201px; display:none" id="writingCategoryView" >
				<div class="headerArrowCategory"></div>
				<div class="writingViewContent">
						<div onClick="javascript:writingSubChange('기쁨')">
							<span>기쁨</span>
						</div>
						<div onClick="javascript:writingSubChange('슬픔')">
							<span>슬픔</span>
						</div>
						<div onClick="javascript:writingSubChange('즐거움')">
							<span>즐거움</span>
						</div>
						<div onClick="javascript:writingSubChange('놀람')">
							<span>놀람</span>
						</div>
						<div onClick="javascript:writingSubChange('화남')">
							<span>화남</span>
						</div>
				</div>
			</div>
		</div>
	</div>
</div>
